import React, { Component ,createRef} from 'react';
import { LockOutlined,KeyOutlined,MobileOutlined } from '@ant-design/icons';
import { Button, Form, Input,Space ,message} from 'antd';
import Captcha from '@/components/Captcha';
import {withRouter} from 'react-router-dom'
import url from '@/config/url';
import axios from '@/http/http'
class Mobilelogin extends Component {
    // 获取表单实例对象
    ref1 = createRef()
    ref2 = createRef()
    render() {
        return (
            <div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    ref={this.ref1}
                    >

                        {/* 手机号 */}
                    <Form.Item
                        name="mobile"
                        rules={[
                        {
                            required: true,
                            message: '请输入手机号!',
                            //正则匹配校验
                            pattern:/^1[3-9]\d{9}$/
                        },
                        ]}
                    >
                        <Input size="large" prefix={<MobileOutlined />} placeholder="手机号" />
                        {/* prefix={<MobileOutlined />} */}
                    </Form.Item>

                    {/* 用Space组件设置间距 */}
                    <Space>
                        {/* 验证码 */}
                        <Form.Item
                            name="captcha"
                            rules={[
                            {
                                required: true,
                                message: '请输入验证码!',
                            },
                            ]}
                        >
                            <Input
                            prefix={<LockOutlined />}
                            
                            type="text"
                            placeholder="验证码"
                            size="large"
                            />
                        </Form.Item>

                        <Form.Item>
                            {/* 验证码 */}
                            {/* 这里需要传参数，不传会报错，利用 prop-types 模块来传 */}
                            {/* 在UI组件中嵌套了一个自己的组件 */}
                            <Captcha getKey={this.getKey} w={130} h={39} ref={this.ref2}></Captcha>
                        </Form.Item>
                    </Space>
                    {/* 短信验证码 */}
                    <Space>
                        {/* 验证码 */}
                        <Form.Item
                            name="code"
                            rules={[
                            {
                                required: true,
                                message: '请输入短信验证码!',
                            },
                            ]}
                        >
                            <Input
                            prefix={<KeyOutlined className="site-form-item-icon" />}
                            
                            type="text"
                            placeholder="验证码"
                            size="large"
                            />
                        </Form.Item>

                        <Form.Item>
                            <Button size='large' onClick={this.sendMsgFn} disabled={this.state.time != 30}>
                                {this.state.time != 30?this.state.time + 's后重新发送':'发送验证码'}
                            </Button>
                        </Form.Item>
                    </Space>
                    
                        <Form.Item>
                            <Button disabled={this.state.disabledClick} size="large" block={true} type="primary" htmlType="submit" className="login-form-button">
                            登录
                            </Button>
                        </Form.Item>
                    </Form>
            </div>
        );
    }
    state = {
        key:'',
        time:30,
        requestId:'',
        disabledClick:true
    }
    ref2 = createRef()
    // 获取子组件传递过来的key，验证码的标识符
    getKey = (key)=>{
        this.setState({
            key:key,
        })
    }
    // 点击登录事件
    onFinish = (values) => {
        values.requestId = this.state.requestId
        axios.post(url.msgLogin,values).then(res=>{
            // console.log(res)
            if(res.data.errNo === 0){
                message.success('登录成功',1)
                this.props.history.push('/dashboard')
            }else{
                message.error(res.data.errText,1)
            }
        }).catch(e=>{})
    };
    // 发送验证码
    sendMsgFn = () => {
        this.ref1.current.validateFields(['mobile','captcha']).then(res=>{
            // console.log(res)
            // 验证码校验
            axios.post(url.captchaverify,{
                key:this.state.key,
                captcha:res.captcha
            }).then(res1=>{
                console.log(res1)
                if(res1.data.errNo === 0){
                    // 成功
                    // 发送验证码
                    axios.post(url.sendCode,{
                        token:res1.data.context.token,
                        type:0,
                        mobile:res.mobile
                    }).then(res2=>{
                        console.log(res2)
                        if(res2.data.errNo === 0){
                            // 短信发送成功
                            message.success('短信发送成功',1)
                            // 倒计时
                            this.timeover()
                            this.setState({
                                requestId:res2.data.requestId
                            })
                            this.state.disabledClick = false
                        }else{
                            // 短信发送失败
                            message.error(res2.data.errText,1)
                            // 重新刷新验证码
                            this.ref2.current.loadCaptcha()
                            // 清空重置表单
                            this.ref1.current.setFieldsValue({
                                captcha:'',
                                mobile:''
                            })
                        }
                    }).catch(e=>{})
                }else{
                    // 不成功
                    message.error(res1.data.errText, 1)
                    // 重新刷新验证码
                    this.ref2.current.loadCaptcha()
                    // 清空表单
                    this.ref1.current.setFieldsValue({
                        captcha:''
                    })
                }
            }).catch(e=>{})
        }).catch(e=>{
            console.log(e)
        })
    }
    // 倒计时
    timer = null
    timeover = () => {
        this.timer = setInterval(()=>{
            if(this.state.time === 0){
                clearInterval(this.timer)
                this.setState({
                    time:30
                })
            }else{
                this.setState({
                    time:this.state.time - 1
                })
            }
        },1000)
    }

}

export default withRouter(Mobilelogin);
